<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    1.本地引入vue的js文件  -->
<!--    <script src="../js/vue2.js"></script>-->
    <!--    2.在线引入vue的js文件  -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<h1>vue基本环境构建</h1>

<!--初始化容器-->
<div class="app">
    <h2>div1</h2>
</div>
<hr>
<div class="app">
    <h2>div2</h2>
</div>

<script>
    //  每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
    const vm = new Vue({
        template: "<h2>Hello Vue</h2>"    //  需要渲染的模板
    })

    // 建立vm实例 和  div#app 容器关系  挂载     后续在初始化容器中的dom相关词操作均由vm实例完成
    // vm.$mount("#app")    //推荐使用
    vm.$mount(".app")

    // vm.$mount(document.getElementsByClassName("app")[0])
    // vm.$mount(document.getElementById("app"))

    /*
    *      1.  vm实例和app容器进行绑定时是否一定使用id选择器    否     class    document.getElementById("app")  document.getElementsByClassName("app")[0]
    *      2.  vm实例可以和几个容器绑定      一个vm实例只能绑定一个容器    vm  和  容器是一对一的关系
    *      3.  通过 template实现数据渲染 会覆盖绑定容器中的内容
    *
    * */

</script>

</body>
</html>